<template>
	<!-- 风俗文化 -->
	<div class="MoresBody">
		<div class="classification">
			<ul>
				<li @click="selectMoresAll">
					<a>全部</a>
				</li>
			</ul>
			<ul v-for="(item,index) in classifiData" :key="index">
				<li @click="selectClassifyId(item.id)">
					<a>{{item.classificationName}}</a>
				</li>
			</ul>
		</div>
		<div class="SpotBox">
			<!-- <el-card class="spotCard" @click.native="skipScenicInfo(item.spotId)" v-for="(item,index) in MoresData" -->
			<el-card class="spotCard" @click.native="skipMoresInfoPage(item.moresId)" v-for="(item,index) in MoresData"
				:key="index" shadow="hover" :class="{'listbox' : index % 4 === 3}">
				<div style="position: relative;">
					<img :src="$store.state.imgShowRoad2 + '/file/' + item.moresPicture" />
					<span>
						{{item.moresName}}
					</span>
				</div>
			</el-card>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
	</div>
</template>

<script>
	import MoresApi from "@/api/mores.js"
	import moresclassApi from "@/api/moresclassify.js"
	export default {
		data() {
			return {
				total: 0,
				pageSize: 10,
				currentPage: 1,
				MoresData: [],
				classifiData: [],
				currentClassifyId: null,
			};
		},
		computed: {

		},
		methods: {
			async selectMoresAll() { //全部
				const res = await MoresApi.selectMoresAll("/znMores/selectMoresAll", {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.MoresData = res.data.records;
					this.total = res.data.total;
					this.currentClassifyId = null;
				}
			},
			async SearchClassifyAll() { //全部分类
				const res = await moresclassApi.SearchClassifyAll("/znMoresClassification/SearchClassifyAll", {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.classifiData = res.data.records;
					this.total = res.data.total;
				}
			},
			async selectClassifyId(classifyId) { ////通过分类id查询风俗文化page集合
				const res = await MoresApi.selectClassifyId("/znMores/selectClassifyId", {
					classifyId: classifyId,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.MoresData = res.data.records;
					this.total = res.data.total;
					this.currentClassifyId = classifyId;
				}
			},
			skipMoresInfoPage(id) {
				this.$router.push({
					path: `/MoresInfoPage/${id}`
				}).catch(err => err);
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				if(this.currentClassifyId){
					this.selectClassifyId(this.currentClassifyId);
				}else{
					this.selectMoresAll();
				}
			},
		},
		created() {
			this.SearchClassifyAll();
			this.selectMoresAll();
		}
	};
</script>

<style lang="scss" scoped>
	.MoresBody {
		margin: 0 18.6% 0 18.6%;

		.SpotBox {
			display: flex;
			flex-wrap: wrap;

			.el-card ::v-deep .el-card__body {
				padding: 0;
			}

			.el-card.listbox {
				margin: 0 0 15px 0;
				width: 285px;
				height: 255px;
			}

			.spotCard {
				margin: 0 15px 15px 0;
				width: 285px;
				height: 255px;

				img {
					overflow: hidden;
					line-height: 0;
					border-radius: 5px;
					width: 100%;
					height: 255px;
					transition: transform 0.3s ease-in-out;
				}

				span {
					width: 100%;
					display: block;
					position: absolute;
					bottom: 0;
					left: 0;
					color: #fff;
					background: rgb(0, 0, 0, 0.6);
					font-size: 14px;
					line-height: 35px;
					height: 35px;
					text-align: center;
				}

				img:hover {
					transform: scale(1.2);
				}
			}
		}

		.classification {
			box-shadow: 0 0 10px #f3f3f3;
			width: 1190px;
			height: 152px;
			border-left: 1px solid #f3f3f3;
			background: #FFFFFF;
			border-top: 3px solid #00afdf;
			margin-top: 20px;
			margin-bottom: 40px;

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				cursor: pointer;

				li {
					width: 131.1px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					border-bottom: 1px solid #f3f3f3;
					border-right: 1px solid #f3f3f3;
					float: left;
					font-size: 14px;
					color: #f45c00;

					a {
						width: 149px;
						height: 50px;
						display: block;
						color: #333;
					}
				}
			}

			li:hover {
				background-color: #ebebeb;
				/* 设置鼠标悬停时的背景色 */
			}
		}
	}
</style>